package myJs.search.detail

import myJs.api.Api
import myJs.cps._
import myJs.cps.project.{BarCp, BoxplotCp, CellTypeCp, FeatureCp, FeaturePlotCp, GeneExpCp, MarkerCp, ScatterCp}
import myJs.myPkg.{NavigateOptions, ReactRouterDOM}
import myJs.myPkg.bootstrap.jquery.{AffixOptions, Offset, ScrollspyOptions}
import myJs.myPkg.jquery.$
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import org.scalajs.dom
import org.scalajs.dom.{Event, document, window}
import slinky.core.{FunctionalComponent, TagElement}
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.facade.ReactElement
import slinky.web.SyntheticMouseEvent
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._
import typings.csstype.csstypeStrings
import myJs.cps.project._
import shared.VarTool

/** Created by yz on 21/1/2022
  */
@react object SingleCellCp {

  case class Props(geneName: String, showLoading: Boolean = true, defaultAnchor: String = "sUMap")

  val component = FunctionalComponent[Props] { props =>
    val (geneName, setGeneName) = useState(props.geneName)
    val navigate = ReactRouterDOM.useNavigate()

    object FTool {
      def geneNameChange = (v: String) => {
        setGeneName(v)
      }
    }

    useEffect(
      () => {
        if (geneName != props.geneName) {
          val url = s"${Detail.absolutePath}?geneName=${geneName}&species=Hsa&tab=singleCell"
          navigate(s"${url}")
        }
      },
      List(geneName)
    )

    div(
      style := Style(display = csstypeStrings.flex, maxWidth = 1108),
      CommonSingleCellCp(
        geneName = geneName,
        geneNameChange = FTool.geneNameChange,
        showLoading = props.showLoading,
        defaultAnchor = props.defaultAnchor
      )
    )

  }

  object STool {}

}
